<template>
  <div>
    <van-nav-bar
      title="html目录"
     
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div>
      <van-collapse
        v-model="activeNames"
        v-for="(item, index) in title1"
        :key="index"
      >
        <van-collapse-item :title="item.page" :name="index">
            <div style="paddingLeft:20px" v-for="(item,index) in title1[index].content1" :key="index">
                <router-link to="/index/html_content"> {{item.content}} </router-link>
            </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "html_course",
  data() {
    return {
      activeNames: [""],
      title1: [
        {
          page: "HTML 教程",
          content1: [
              {
                  content:'HTML 简介'
              },
              {
                  content:'HTML 编译器'
              },
              {
                  content:'HTML 基础'
              },
              {
                  content:'HTML 元素'
              },
          ],
        },
        {
          page: "章节2",
          content: "章节js",
        },
        {
          page: "章节3",
          content: "章节html",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>
<style scoped>
/deep/.van-icon {
  color: black;
}
/deep/.van-nav-bar__content {
  background-color: rgb(231, 229, 227);
}
</style>